<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../../vendors/custom/custom.min.css" rel="stylesheet">
    <!--Bootstrap-table-->
    <link href="../../vendors/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <link href="../../vendors/jquery/jquery.treegrid.min.css" rel="stylesheet">
    <!--自定义样式覆盖-->
    <style>
        body {
            background: #F7F7F7;
        }
    </style>
</head>

<body>

<!--表格 工具栏-->
<div id="toolbar">
    <button id="add" class="btn btn-danger">
        <i class="fa fa-plus"></i> Add
    </button>
</div>

<!--页面表格-->
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table id="table" class="table table-striped jambo_table bulk_action"></table>
            </div>
        </div>
    </div>
</div>

<!--删除确认弹出层-->
<div class="modal fade" id="delcfmModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">提示信息</h4>
            </div>
            <div id="alertBlock"></div>
            <div class="modal-body">
                <p>您确认要删除吗？</p>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="deleteID" name="pid"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button"  onclick="delSubmit()" class="btn btn-success">确定</button>
            </div>
        </div>
    </div>
</div>

<!--添加分类弹出层-->
<div class="modal fade" id="addModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加分类</h4>
            </div>
            <div id="alertBlock2"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-add">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类名字：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="cname-add" name="cname">
                        </div>
                        <label class="col-sm-2 control-label">所属分类：</label>
                        <div class="col-sm-3">
                            <select name="pid" id="pid-add" class="form-control">
                                <option value="0" selected="selected">无</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="add_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--编辑弹出层-->
<div class="modal fade" id="tableModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加分类</h4>
            </div>
            <div id="alertBlock3"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-edit">
                    <input type="hidden" name="cid" id="cid-edit">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类名字：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="cname-edit" name="cname">
                        </div>
                        <label class="col-sm-2 control-label">所属分类：</label>
                        <div class="col-sm-3">
                            <select name="pid" id="pid-edit" class="form-control">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="edit_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--JS插件引入-->

<!--jQuery -->
<script src="../../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../../vendors/iCheck/icheck.min.js"></script>
<!--Bootstrap-table-->
<script src="../../vendors/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="../../vendors/bootstrap-table/dist/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="../../vendors/jquery/jquery.treegrid.min.js"></script>
<script src="../../vendors/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<!-- Custom Theme Scripts -->
<script src="../../vendors/custom/custom.min.js"></script>
<!--myself script-->
<script src="../../vendors/myself/myself.js"></script>

<!--表格相关-->
<script type="text/javascript">
    /**
     * 表格相关
     * @type {jQuery.fn.init|jQuery|HTMLElement}
     */
    const $table = $('#table');

    $(function () {
        var table = new tableInit();
        table.Init();
    });

    var tableInit = function () {
        var table = new Object()
        table.Init = function () {
            $('#table').bootstrapTable({
                toolbar: '#toolbar',
                url:'/categery/getCategeryList',
                striped:true,
                sidePagenation:'server',
                showRefresh: true,
                // search: true,
                idField:'cid',
                columns: [{
                    field: 'cid',
                    title: '分类ID',
                    align: 'center',
                    width: 150
                },{
                    field: 'cname',
                    title: '分类名字',
                    align: 'center'
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }],
                treeShowField: 'cname',
                parentIdField: 'pid',
                onLoadSuccess: function(data) {
                    $table.treegrid({
                        initialState: 'collapsed',//收缩
                        treeColumn: 0,//指明第几列数据改为树形
                        expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                        expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                        onChange: function() {
                            $table.bootstrapTable('resetWidth');
                        }
                    });
                }
            });
        }
        return table;
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            pageSize: params.limit, //每一页的数据行数，默认是上面设置的10(pageSize)
            pageIndex: params.offset / params.limit + 1, //当前页面,默认是上面设置的1(pageNumber)
        }
    }

    // 表格操作格式化
    function operateFormatter(value, row, index) {
        return [
            '<a class="edit" href="javascript:void(0)" title="Edit">',
            '<i class="fa fa-edit"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
    }

    // 表格事件
    var visible_list = [];
    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            $('#cid-edit').val(row.cid);
            $('#cname-edit').val(row.cname);
            $('#pid-edit').html("");

            $.ajax('/categery/getCategeryList',{
                type: 'get',
                success:function(data) {
                    var t = 0;
                    $.each(data.rows,function (i,temp) {
                        // console.log(temp.cid);
                        if(temp.cid != row.cid) {
                            if (temp.cid == row.pid) {
                                console.log('temp');
                                $('#pid-edit').append('<option selected="selected" value="' + temp.cid + '">' + temp.cname + '</option>')
                                t = 1;
                            } else {
                                $('#pid-edit').append('<option value="' + temp.cid + '">' + temp.cname + '</option>')
                            }
                        }
                    });
                    if(t == 0) {
                        $('#pid-edit').append('<option selected="selected" value="0">无</option>');;
                    }else {
                        $('#pid-edit').append('<option value="0">无</option>');
                    }
                }
            });

            $('#tableModel').modal();
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteID').val(row.cid);
            $('#delcfmModel').modal();
        }
    };

    /**
     * 模态层相关
     */
    function delSubmit() {
        $.ajax("/categery/deleteCategery", {
            type: 'get',
            data: 'cid='+$('#deleteID').val(),
            success: function (data) {
                window.location.reload();
                $('#myAlert').alert();
            },
            error: function (data) {
                $('#alertBlock').html('<div id="myAlert2" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>删除失败。 </div>');
            }
        });
    }

    // 模态层保存事件
    $('#edit_submit').click(function () {
        var formData = $('#form-edit').serializeObject();
        $.ajax("/categery/updateCategeryPid", {
            type: 'post',
            data: formData,
            success: function (data) {
                window.location.reload();
                $('#myAlert3').alert();
            },
            error: function (data) {
                $('#alertBloc3k').html('<div id="myAlert3" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>保存失败。 </div>');
            }
        });
    });

</script>

<!--添加相关-->
<script type="text/javascript">
    // 点击添加按钮跳出模态层
    $('#add').click(function () {
        $('#pid-add').html('<option value="0" selected="selected">无</option>');
        $.ajax('/categery/getCategeryList',{
            type: 'get',
            success:function(data) {
                $.each(data.rows,function (i,temp) {
                    $('#pid-add').append('<option value="'+temp.cid+'">'+temp.cname+'</option>')
                })
            }
        });
        $('#addModel').modal();
    });

    // 数据库添加按钮事件
    $('#add_submit').click(function () {
        var formData = $('#form-add').serializeObject();
        $.ajax("/categery/addNewCategery", {
            type: 'post',
            data: formData,
            success: function (data) {
                window.location.reload();
                $('#myAlert2').alert();
            },
            error: function (data) {
                $('#alertBlock2').html('<div id="myAlert2" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>添加失败。 </div>');
            }
        });
    });
</script>

</body>